
<template>
  <el-header>
    <i v-if="isCollapse"  class="el-icon-s-unfold"  @click="unfold"></i>
    <i v-else  class="el-icon-s-fold" @click="fold"></i>
    <el-breadcrumb separator="/">
       <el-breadcrumb-item :to="{ path: '/' }">页</el-breadcrumb-item>
       <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
       <el-breadcrumb-item>活动列表</el-breadcrumb-item>
       <el-breadcrumb-item>活动详情</el-breadcrumb-item>
    </el-breadcrumb>

    <el-dropdown>
  <span class="el-dropdown-link">
    <el-avatar :size="50" :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"></el-avatar>
    <img src="../assets/VIP.png"  v-if="vipVue">
    <img src="../assets/VIP (1).png"  v-else>
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>   
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item>用户姓名</el-dropdown-item>
    <el-dropdown-item divided>退出</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

  </el-header>
</template>

<script >
import bus from '../js/bus'
 export default {
    name:'header',
    props:['father2','vip'],
    data(){
      return{
        isCollapse:this.father2,
        vipVue:this.vip
      }
    },
    methods:{
      unfold(){
        this.isCollapse=false
        bus.$emit('fold',this.isCollapse)
      },
      fold(){
        this.isCollapse=true
        bus.$emit('fold',this.isCollapse)
      }
      
       
    }
 }
</script>

<style lang="scss" scoped>
.el-header{
  display: flex;
  align-items: center;
  background-color:#dfdcdc;
  i{
    margin-right: 17px;
  }
}
.el-dropdown{
  margin-left: auto;
  .el-dropdown-link{
display: flex;
justify-content: center;
align-items: center;
  }
}
img{
 height: 30px;
  width:40px;
  margin-left: -45px;
  margin-bottom: -38px;
} 
</style>